<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta id="viewport" name="viewport" />
    <script src="//aloe-static.oss-cn-hangzhou.aliyuncs.com/zoom/zoom75.js"></script>
    <link rel="stylesheet" href="css/page-common.css">
    <link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css">
    <link rel="stylesheet" href="css/upload.css"/>
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        html{
            height: 100%;
        }
        body{
            background: white;
            height: 100%;
        }
        body{
            height: 100%;
            position: relative;
        }

        #getFile{
            position: absolute;
            background-color: blueviolet;
            color: white;
            top:700px;
            right: 20px;
            width: 200px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            border-radius: 20px;
        }

        #img1{
            position: absolute;
            left: 20px;
            top:30px;
            z-index: 5;
        }
        #cans{
            background-color: white;
        }
        .content{
            width: 100%;
            height: 100%;
            background-color: red;display: none;position: absolute;z-index: 999;
            top:0;
            left: 0;
        }

        #js-last{
            width: 750px;
            height: 100%;
            position: absolute;
            z-index: 9999;
            left: 0;
            top:0;
        }
    </style>
</head>
<body>
<button id='fileChooseButton' class="button blue rarrow file-input-mask">上传图片<input class="upload-file" type="file" id="file" accept="image/*" capture="camera"/></button>
<a id="getFile" class="pull-right">使用</a>
<img src="/css/btn.jpg" alt="" id="img1">
<img id="previewResult"/>
<img id="needCropImg" />
<div class="app" id="uploadPage">
    <div class="upload-loading">
        <span class="centerXY"><i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i></span>
    </div>
    <div class="main">
        <canvas class="upload-mask"> </canvas>
        <div class="preview-box">
            <img id="preview"/>
        </div>
        <canvas class="photo-canvas" width="750" height="600" id="photo-canvas"></canvas>
        <a  id="rotateBtn">
            <i class="fa fa-rotate-right  fa-3x"></i>
            <div>旋转照片</div>
        </a>
    </div>
</div>
<div class="content" >
    <canvas width="750" height="600" id="cans"></canvas>
</div>
<!--"-->
<video  id="js-last" class="video-js " autoplay="autoplay" x5-video-player-fullscreen="true" style="object-fit: fill" muted  preload="load" playsinline x-webkit-airplay="true" webkit-playsinline="true" x5-video-player-type="h5"  x5-video-orientation="portrait" width="100%" height="100%" src="http://aloeh5.oss-cn-hangzhou.aliyuncs.com/ufsmmbb/video/v1.1/6.mp4"></video>
</body>
<script src="//cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
<script src="js/require.js" ></script>
<script src="js/main.js"></script>
<script src="js/canvas-toBlob.js"></script>
<script>
    window.onload = function () {
        //全屏视频
        var vid = document.getElementById("js-last");

        vid.onended = function() {
            $("#js-last").hide(200);
            $("#js-last").remove();
        };
    };







    var myCrop;
    //    防require缓存
    require.config({
        urlArgs:"bust="+new Date
    })
    require(["jquery",'hammer','tomPlugin',"tomLib",'hammer.fake','hammer.showtouch'],function($,hammer,plugin,T){
        document.addEventListener("touchmove",function(e){
            e.preventDefault();
        })
        //初始化图片大小750*600
        var opts={cropWidth:750,cropHeight:600},
                $file=$("#file"),
                previewStyle={x:0,y:0,scale:1,rotate:0,ratio:1},
                transform= T.prefixStyle("transform"),
                $previewResult=$("#previewResult"),
                $previewBox=$(".preview-box"),
                $rotateBtn=$("#rotateBtn"),
                $getFile=$("#getFile"),
                $preview=$("#preview"),
                $uploadPage=$("#uploadPage"),
                $mask=$(".upload-mask"),
                $loading=$(".upload-loading"),
                maskCtx=$mask[0].getContext("2d"),
                $needCropImg=$("#needCropImg");

        //这是插件调用主体
        myCrop=T.cropImage({
            bindFile:$file,//绑定Input file
//            bindFile:$needCropImg[0],//绑定一个图片
            enableRatio:true,//是否启用高清,高清得到的图片会比较大
            canvas:$(".photo-canvas")[0],  //放一个canvas对象
            cropWidth:opts.cropWidth,       //剪切大小
            cropHeight:opts.cropHeight,
            bindPreview:$preview,      //绑定一个预览的img标签
            useHammer:true,            //是否使用hammer手势，否的话将不支持缩放
            oninit:function(){

            },
            onChange:function(){
                $loading.show();
                resetUserOpts();
            },
            onLoad:function(data){
                //用户每次选择图片后执行回调
                previewStyle.ratio=data.ratio;
                $preview.attr("src",data.originSrc).css({width:data.width,height:data.height}).css(transform,'scale('+1/previewStyle.ratio+')');
                myCrop.setCropStyle(previewStyle);
                $loading.hide();
            }
        });
        function resetUserOpts(){
            $(".photo-canvas").hammer('reset');
            previewStyle={scale:1,x:0,y:0,rotate:0};
            $previewResult.attr("src",'').hide();
            $preview.attr("src",'')
        }
        $('#fileChooseButton').on('click',function(){
            setTimeout(function(){
                resetUserOpts();
            })
        })
        $(".photo-canvas").hammer({
            gestureCb:function(o){
                //每次缩放拖拽的回调
                $.extend(previewStyle,o);
//                console.log("用户修改图片",previewStyle)
                $preview.css(transform,"translate3d("+ previewStyle.x+'px,'+ previewStyle.y+"px,0) rotate("+previewStyle.rotate+"deg) scale("+(previewStyle.scale/previewStyle.ratio)+")")
            }
        })
        //选择图片
        $rotateBtn.on("click",function(){
            previewStyle.rotate+=90;
            if(previewStyle.rotate>=360){
                previewStyle.rotate-=360;
            }
            $(".photo-canvas").hammer('setRotate',previewStyle.rotate)
            myCrop.setCropStyle(previewStyle)
            $preview.css(transform,"translate3d("+ previewStyle.x+'px,'+ previewStyle.y+"px,0) rotate("+previewStyle.rotate+"deg) scale("+(previewStyle.scale/previewStyle.ratio)+")")
        })
        //获取图片并关闭弹窗返回到表单界面
        $getFile.on("click",function(){
            var cropInfo;
            $uploadPage.hide();
            $(".content").show();
            myCrop.setCropStyle(previewStyle);
            //自定义getCropFile({type:"png",background:"red",lowDpi:true})
            cropInfo=myCrop.getCropFile({});
            $previewResult.attr("src",cropInfo.src).show(function () {
                var c=document.getElementById("cans");
                var ctx=c.getContext("2d");
                ctx.clearRect(0,0,750,600);
                ctx.fillStyle="#fff";
                ctx.fillRect(0, 0,750,600);
                var img=document.getElementById("img1");
                var img1=document.getElementById("previewResult");
                var width = $("#previewResult").width();
                var height =$("#previewResult").height();
                var scale = width / height;
                var width1 = 750;
                var height1 = parseInt(width1 / scale);

                ctx.drawImage(img1,0,0,width,height,0,0,width1,height1);
                ctx.save();
                ctx.drawImage(img,20,30);
                ctx.save();
                var pic = c.toDataURL("image/jpeg", 1.0);
                var data = {base64:pic};
                $.post('/test/insert',data,function(data){
                    console.log(data);
                },'JSON');
            });

        });
        //上传文件按钮&&关闭弹窗按钮
        $(document).delegate("#file","click",function(){
            $uploadPage.show();
        }).delegate("#closeCrop","click",function(){
            $uploadPage.hide();
            resetUserOpts();
            myCrop.setCropStyle(previewStyle)
        })
        $file.one("click",showCropModal)
        $previewResult.on('click',showCropModal)

        function showCropModal(){
            setTimeout(function(){
                $uploadPage.show();
                $mask.prop({width:$mask.width(),height:$mask.height()})
                maskCtx.fillStyle="rgba(0,0,0,0.7)";
                maskCtx.fillRect(0,0,$mask.width(),$mask.height());
                maskCtx.strokeStyle='white';
                maskCtx.lineWidth='2'
                maskCtx.clearRect(($mask.width()-opts.cropWidth)/2,($mask.height()-opts.cropHeight)/2,opts.cropWidth,opts.cropHeight)
                maskCtx.strokeRect(($mask.width()-opts.cropWidth)/2-1,($mask.height()-opts.cropHeight)/2-1,opts.cropWidth+2,opts.cropHeight+2);//Add a subpath with four points
            })
        }
    })
</script>
</html>